<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        #header {
        	height: 48px;
        	line-height: 48px;
        	background-color: #e62442;
        	color: #fff;
            overflow: hidden;
        }
        #header .header_left {
        	width: 20%;
            height: 100%;
            float: left;
        	padding-left: 18px;
        	box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        #header .header_left img {
        	height: 20px;
        	display: block;
        }
        #header .header_right {
        	width: 80%;
            height: 100%;
            float: left;
        	padding-right: 20%;
        	box-sizing: border-box;
        	font-size: 17px;
        	text-align: center;
        }
        .nav {
        	overflow: scroll;
        	-webkit-overflow-scrolling: touch;
        	border-bottom: 1px solid #e1e1e1;
        	background-color: #f8f8f8;
        }
        .nav::-webkit-scrollbar {
      		display: none;
    	}
    	.nav .nav_box {
        	width: max-content;
        	width: -webkit-max-content;
        	position: relative
    	}
        .nav .nav_box ul {
			overflow: hidden;
        	padding: 0 20px;
        }
        .nav .nav_box ul li {
        	height: 35px;
        	line-height: 35px;
        	float: left;
        	color: #999;
        	font-size: 15px;
        	margin-right: 20px;
        }
        .nav .nav_box ul li:last-child {
        	margin-right: 0;
        }
        .nav .nav_box ul li.active {
        	color: #e62442;
        }
        .nav .nav_box .line_wrap {
	        position: absolute;
	        left: 0;
	        right: 0;
	        bottom: 0;
	    }
	    .nav .nav_box .line_wrap .line_inner {
	        width: 25px;
	        height: 2px;
	        background-color: #e62442;
	        transform: translateX(0px);
	        -webkit-transform: translateX(0px);
	    }
    </style>
</head>
<body>
	<header id="header">
    	<div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
    		<img src="../image/back.png">
    	</div>
    	<div class="header_right">早餐</div>
    </header>
    <div class="nav" id="nav">
    	<div class="nav_box">
	    	<ul id="menu_ul">
<!-- 	    		<li class="active" tapmode onclick="fnClick(0);">早餐</li>
	    		<li tapmode onclick="fnClick(1);">午餐</li>
	    		<li tapmode onclick="fnClick(2);">有机素食</li>
	    		<li tapmode onclick="fnClick(3);">甜品饮品</li> -->
	    	</ul>
	    	<div class="line_wrap">
	            <div class="line_inner"></div>
	        </div>
    	</div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="menuTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it.length;i++){ }}
        <li tapmode onclick="fnClick({{=i}});">{{=it[i]['name']}}</li>
    {{ }; }}
</script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar(header);
        var sub = api.pageParam.sub;
        var title = api.pageParam.title;
        $('.header_right').text(title);
        //设置菜单
        fnSetMenu(sub);
        var height = $('#header').height() + $('#nav').height();
        //根据子栏目组合出framegroup的frame
        var frames = [];
        $.each(sub,function(i,v){
            var frame = {
                name: 'seller_list_frame'+i,
                url : 'seller_list_frame.html',
                pageParam : {
                    height : height,
                    cid : v.id
                },
                bounces :true
            }; 
            frames.push(frame);
        });
        api.openFrameGroup({
            name: 'sellerList',
            rect: {
                 x: 0, 
                 y: height, 
                 w: 'auto',
                 h: api.winHeight - height
            },
            scrollEnabled: true,
            frames: frames
        }, function(ret, err) {
            if (ret) {
                fnChange(ret.index);
            } 
        });

    };

    function fnClick(_index) {
        fnChange(_index);
        api.setFrameGroupIndex({
            name: 'sellerList',
            index: _index
        });
    }

    function fnChange(_index) {
        if (!isNaN(_index)) {
            this_ = $('.nav ul li').eq(_index);
        }
        $('.nav ul li').removeClass('active');
        $(this_).addClass('active');
        var scroll = $(this_).offset().left + $('.nav').scrollLeft() - $('.nav').width() / 2 + $(this_).width() / 2;
        var left = $(this_).offset().left + $('.nav').scrollLeft();
        $('.line_inner').width($(this_).width());
        $('.line_inner').css({
            'transform': 'translateX(' + left + 'px)',
            '-webkit-transform': 'translateX(' + left + 'px)',
            'transition': 'transform 300ms ease-in-out',
            '-webkit-transition': '-webkit-transform 300ms ease-in-out',
        });
        $('.nav').scrollLeft(scroll);
    }

    function fnSetMenu(data_) {
        var listT = $api.byId('menuTpl');
        var listTFn = doT.template(listT.text);
        var html = listTFn(data_);
        var list = $api.byId('menu_ul');
        $api.append(list, html);
        api.parseTapmode();
        fnClick(0);
    }
</script>
</html>